<template>
  <div>
    <el-card>
      <div class="content-style">
        <div class="content-item">
          <span style="font-size: 16px"> 标题：</span
          ><span>{{ detailData.title }}</span>
        </div>
        <div class="content-item">
          <span style="font-size: 16px"> 内容：</span
          ><span>{{ detailData.content }}</span>
        </div>
        <div style="display: flex; flex-wrap: wrap" class="content-item">
          <div v-for="(item, index) in imgUrl" :key="index">
            <el-image
              style="
                width: 200px;
                display: flex;
                margin-left: 10px;
                margin-bottom: 20px;
              "
              :src="item"
              fit="contain"
              :preview-src-list="[item]"
              ></el-image
            >
           
          </div>
        </div>
        <div class="content-item" style="display: flex">
          <div class="item">
            <span style="font-size: 16px"> 发布时间：</span
            ><span>{{ detailData.createTime }}</span>
          </div>
          <div class="item">
            <span style="font-size: 16px"> 发布昵称：</span
            ><span>{{ detailData.userName }}</span>
          </div>
          <div class="item">
            <span style="font-size: 16px"> 发布账号：</span
            ><span>{{ detailData.phone }}</span>
          </div>
        </div>
      </div>
      <div>
        <div class="searchBox">
          <el-form :model="searchForm" ref="searchFormRef">
            <el-row>
              <el-form-item prop="auditStatus">
                <div class="item">
                  <span v-html="'审核状态'" class="nameSpan"></span>
                  <el-select filterable 
                    clearable
                    size="mini"
                    v-model="searchForm.auditStatus"
                    placeholder="请选择审核状态"
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item prop="publishPlatform">
                <div class="item">
                  <span v-html="'发布渠道'" class="nameSpan"></span>
                  <el-select filterable 
                    clearable
                    size="mini"
                    v-model="searchForm.publishPlatform"
                    placeholder="请选择发布渠道"
                  >
                    <el-option
                      v-for="item in publishPlatformOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item prop="phone">
                <div class="item">
                  <span v-html="'发布人账号'" class="nameSpan"></span>
                  <el-input
                    size="mini"
                    v-model="searchForm.phone"
                    placeholder="请输入发布人账号"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="item">
                  <span v-html="'创建时间'" class="nameSpan"></span>
                  <el-date-picker
                    size="mini"
                    class="dataPicker"
                    v-model="searchForm.beginTime"
                    type="datetime"
                    placeholder="开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions0"
                    default-time="08:00:00"
                  >
                  </el-date-picker>
                  <span style="color: #d9d9d9">-</span>

                  <el-date-picker
                    size="mini"
                    class="dataPicker"
                    v-model="searchForm.endTime"
                    type="datetime"
                    placeholder="结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions1"
                    default-time="08:00:00"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="searchClick"
                  icon="el-icon-search"
                  type="primary"
                  size="mini"
                  >查询</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetClick"
                  >重置</el-button
                >
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="topBtn">
          <el-button
            size="mini"
            @click="consentClick"
            type="success"
            v-has="'community:comment:audit'"
            >审核通过</el-button
          >
          <el-button
            size="mini"
            @click="refuseClick"
            type="danger"
            v-has="'community:comment:audit'"
            >审核不通过</el-button
          >
        </div>
        <div class="tableBox" ref="tableBoxRef">
          <el-table
            :header-cell-style="{
              background: '#F8F8F8',
              color: '#333',
              fontSize: '16px',
              fontWeight: '700',
            }"
            border
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              prop="content"
              align="center"
              label="评论内容"
               
            >
            </el-table-column>
            <el-table-column
              prop="publishPlatform"
              align="center"
              label="发布渠道"
               
            >
              <template slot-scope="scope">
                <span>{{ publishFormatter[scope.row.publishPlatform] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="userName"
              align="center"
              label="评论人昵称"
               
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              align="center"
              label="评论人账号"
               
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              align="center"
              label="评论时间"
               
            >
              <template slot-scope="scope">{{
                scope.row.createTime | formatDate
              }}</template>
            </el-table-column>
            <el-table-column
              prop="replyCount"
              align="center"
              label="回复数"
               
            >
              <template slot-scope="scope">
                <div v-if="scope.row.replyCount != null">
                  {{ scope.row.replyCount }}
                </div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodCount"
              align="center"
              label="点赞数"
               
            >
              <template slot-scope="scope">
                <div v-if="scope.row.goodCount != null">
                  {{ scope.row.goodCount }}
                </div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditStatus"
              align="center"
              label="审核状态"
               
            >
              <template slot-scope="scope">
                <div
                  :style="{
                    color:
                      scope.row.auditStatus == 1
                        ? '#67c33e'
                        : scope.row.auditStatus == 2
                        ? '#f16f6d'
                        : '',
                  }"
                >
                  {{ auditormatter[scope.row.auditStatus] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  type="text"
                  v-has="'community:comment:delete'"
                  @click="delClick(scope.row)"
                  >删除</el-button
                >
                <el-button
                  icon="el-icon-edit-outline"
                  size="mini"
                  type="text"
                  v-has="'community:comment:edit'"
                  @click="editClick(scope.row, scope.$index)"
                  >编辑</el-button
                >
                <el-button
                  v-if="scope.row.auditStatus == 0"
                  size="mini"
                  type="text"
                  v-has="'community:comment:audit'"
                  @click="consentClick(scope.row, 'detail')"
                  >通过</el-button
                >
                <el-button
                  v-if="scope.row.auditStatus == 0"
                  size="mini"
                  type="text"
                  v-has="'community:comment:audit'"
                  @click="refuseClick(scope.row, 'detail')"
                  >不通过</el-button
                >
              </template>
            </el-table-column>
          </el-table>

            <el-card class="footer" v-if="total > 0">
         <div>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[15, 30, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
          </el-card>
        </div>
      </div>
    </el-card>
    <el-dialog :close-on-click-modal="false" 
      title="编辑"
      :visible.sync="changeVisible"
      width="400px"
      class="addEditAccountDialog"
    >
      <div class="content">
        <div style="margin-bottom: 20px" v-if='editForm.commentType==1'>回复 {{ editForm.replyCustomerName }}</div>
        <el-form :model="editForm" ref="addEditFormRef">
          <el-form-item prop="content">
            <div class="item">
              <el-input
                type="textarea"
                size="mini"
                v-model="editForm.content"
                placeholder="请输入"
                :rows="4"
              >
              </el-input>
            </div>
          </el-form-item>

          <el-form-item class="btns">
            <el-button size="mini" @click="changeVisible = false"
              >取 消</el-button
            >
            <el-button
              v-clickForbidden
              size="mini"
              type="primary"
              @click="dialogSaveClick"
              >确 定</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      editForm: {
        content:"",
        name:""
      },
      changeVisible: false,
      pickerOptions0: {
        disabledDate: (time) => {
          //如果选择了结束时间返回的时间就要不能大于开始时间并且当前之前的时间也不可以选择
          if (this.searchForm.endTime) {
            return (
              time.getTime() > new Date(this.searchForm.endTime).getTime() ||
              time.getTime() < Date.now() - 8.64e7
            );
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.searchForm.beginTime) {
            return (
              time.getTime() <
              new Date(this.searchForm.beginTime).getTime() -
                1 * 24 * 60 * 60 * 1000
            ); //可以选择同一天
          }
        },
      },
      editId: "",
      title: "新增 ",
      addEditDialogVisible: false,
      pageNum: 1,
      pageSize: 15,
      total: 0,
      tableHeight: 50,
      tableData: [],
      id: "",
      detailData: {},
      imgUrl: [],
      multipleSelection: [],
      publishPlatformOptions: [
        { label: "pc", value: 0 },
        { label: "小程序", value: 1 },
      ],
      searchForm: {
        auditStatus: "",
        phone: "",
        publishPlatform: "",
        beginTime: "",
        endTime: "",
      },
      publishFormatter: {
        0: "pc",
        1: "小程序",
      },
      auditormatter: {
        0: "待审核",
        1: "审核通过",
        2: "审核不通过",
      },
      statusOptions: [
        { label: "待审核", value: 0 },
        { label: "审核通过", value: 1 },
        { label: "审核不通过", value: 2 },
      ],
    };
  },
  methods: {
    dialogSaveClick() {
      let data = {
        id: this.editId,
        content: this.editForm.content,
        // commentType:2
      };
      this.$api.editComment(data).then((res) => {
        if (res.data.code == "00000") {
          this.$message.success("编辑成功");
          this.changeVisible = false;
          this.getAuditList();
        }
      });
    },
    consentClick(row, type) {
      if (type == "detail") {
        this.multipleSelection.push(row.id);
      }
      if (this.multipleSelection.length > 0) {
        this.$confirm(
          "通过后，该条动态将同步在PC及小程序端显示，确认通过吗?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            let data = {
              ids: this.multipleSelection,
              state: 1,
            };
            this.$api.setComment(data).then((res) => {
              if (res.data.code == "00000") {
                this.$message.success("审核通过成功");
                this.getAuditList();
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message.warning("请选择待审核的动态");
      }
    },
    refuseClick(row, type) {
      if (type == "detail") {
        this.multipleSelection.push(row.id);
      }
      if (this.multipleSelection.length > 0) {
        this.$confirm(
          "若审核不通过，该条动态仅发布者可见。确认不通过吗?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            let data = {
              ids: this.multipleSelection,
              state: 2,
            };
            this.$api.setComment(data).then((res) => {
              if (res.data.code == "00000") {
                this.$message.success("审核不通过成功");
                this.getAuditList();
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message.warning("请选择待审核的动态");
      }
    },
    delClick(row) {
      if (this.multipleSelection.length > 0) {
        this.$confirm(
          "删除后，PC端和小程序同步删除这条评论，且无法恢复。确认要删除吗?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.$api.delComment({ id: row.id }).then((res) => {
              if (res.data.code == "00000") {
                this.$message.success("批量删除成功");
                this.getAuditList();
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message.warning("请选择待删除的动态");
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(({ id }) => id);
    },

    resetClick() {
      this.$refs.searchFormRef.resetFields();
      this.pageNum = 1;
      this.searchForm.beginTime = "";
      this.searchForm.endTime = "";
      this.getAuditList();
    },
    searchClick() {
      this.pageNum = 1;
      this.getAuditList();
    },
    /**
     * 编辑按钮
     * @param {*} row
     */
    async editClick(row, index) {
      this.editForm={}
      console.log(index);
      this.title = "编辑 ";
      this.changeVisible = true;
      this.editId = row.id;
     
      this.$nextTick(() => {
         this.editForm=JSON.parse(JSON.stringify(this.tableData[index])) 
      });
    },
    /**
     * 获取列表
     * @param {*}
     */
    async getAuditList() {
      const res = await this.$api.commentList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        posterId: this.id,
        ...this.searchForm,
      });
      this.tableData = res.data.result.list;
      this.total = res.data.result.total;
    },
    /**
     * 切换页面大小
     * @param {*} val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAuditList();
    },

    /**
     * 页码切换
     * @param {*} val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getAuditList();
    },
    getAuditDetail() {
      this.$api.auditDetail(this.id).then((res) => {
        if (res.data.code == "00000") {
          this.detailData = res.data.result;
          if(this.detailData.imgUrl){
              this.detailData.imgUrl =
          this.imgUrl = this.detailData.imgUrl.split(",");
          }
        }
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.getAuditDetail();
    this.getAuditList();
  },
};
</script>
<style  lang='less' scoped>
.content-style {
  background-color: #efefef;
  padding: 20px;
  border: 1px solid #797979;
  font-size: 15px;
  .content-item {
    margin-bottom: 20px;
    .item {
      margin-right: 60px;
    }
  }
}
.searchBox {
  .el-row {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      margin-bottom: 0;
    }
    .item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .nameSpan {
        padding-right: 10px;
        box-sizing: border-box;
        white-space: nowrap;
      }
      .el-input {
        width: 162px;
      }
    }
  }
}
.topBtn {
  margin: 10px 0;
}

.addEditAccountDialog {
  .el-form-item {
    .el-select {
      width: 100%;
    }
  }
  .btns {
    text-align: right;
    margin-bottom: 0;
  }
}
</style>
